<!--
 * @Description: 租户配置管理 - 主页面
 * @Author: DSY
 * @Date: 2022-12-30 16:00:28
 * @LastEditors: DHL
 * @LastEditTime: 2024-01-29 15:50:02
-->
<template>
  <div class="tenant-config-wrapper" v-loading="loading">
    <el-scrollbar height="100%">
      <div>
        <div class="tc-divider">
          <el-divider content-position="left">微信配置</el-divider>
        </div>
        <div class="tc-list">
          <div class="tc-item">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="icon" :style="{ 'background-color': '#04be02' }">
                <svg-icon iconClass="wxMp"></svg-icon>
              </div>
              <div class="title">微信公众号</div>
              <div class="btns">
                <div class="btn" title="编辑" @click="handleOpenWxMp">
                  <svg-icon iconClass="edit"></svg-icon>
                </div>
                <div class="btn" title="删除"><svg-icon iconClass="delete"></svg-icon></div>
              </div>
            </el-card>
          </div>

          <div class="tc-item">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="icon" :style="{ 'background-color': '#04be02' }">
                <svg-icon iconClass="wxCp"></svg-icon>
              </div>
              <div class="title">企业微信</div>
              <div class="btns">
                <div class="btn" title="编辑" @click="handleOpenWxCp">
                  <svg-icon iconClass="edit"></svg-icon>
                </div>
                <div class="btn" title="删除"><svg-icon iconClass="delete"></svg-icon></div>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <div>
        <div class="tc-divider">
          <el-divider content-position="left">支付配置</el-divider>
        </div>
        <div class="tc-list">
          <div class="tc-item">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="icon" :style="{ 'background-color': '#04be02' }">
                <svg-icon iconClass="payWx"></svg-icon>
              </div>
              <div class="title">微信支付</div>
              <div class="btns">
                <div class="btn" title="编辑" @click="handleOpenPayWx">
                  <svg-icon iconClass="edit"></svg-icon>
                </div>
                <div class="btn" title="删除"><svg-icon iconClass="delete"></svg-icon></div>
              </div>
            </el-card>
          </div>

          <div class="tc-item">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="icon" :style="{ 'background-color': '#009fe8' }">
                <svg-icon iconClass="payAli"></svg-icon>
              </div>
              <div class="title">支付宝支付</div>
              <div class="btns">
                <div class="btn" title="编辑" @click="handleOpenPayAli">
                  <svg-icon iconClass="edit"></svg-icon>
                </div>
                <div class="btn" title="删除"><svg-icon iconClass="delete"></svg-icon></div>
              </div>
            </el-card>
          </div>

          <div class="tc-item" v-auth="'TENANT-CONFIG-PAY-LAKALA-ORG'">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="icon" :style="{ 'background-color': '#ecf5ff' }">
                <svg-icon iconClass="payLakala"></svg-icon>
              </div>
              <div class="title">拉卡拉支付机构配置</div>
              <div class="btns">
                <div class="btn" title="编辑" @click="handleOpenPayLakalaOrg">
                  <svg-icon iconClass="edit"></svg-icon>
                </div>
                <div class="btn" title="删除"><svg-icon iconClass="delete"></svg-icon></div>
              </div>
            </el-card>
          </div>

          <div class="tc-item">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="icon" :style="{ 'background-color': '#ecf5ff' }">
                <svg-icon iconClass="payLakala"></svg-icon>
              </div>
              <div class="title">拉卡拉支付配置</div>
              <div class="btns">
                <div class="btn" title="编辑" @click="handleOpenPayLakala">
                  <svg-icon iconClass="edit"></svg-icon>
                </div>
                <div class="btn" title="删除"><svg-icon iconClass="delete"></svg-icon></div>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <div>
        <div class="tc-divider">
          <el-divider content-position="left">电子签配置</el-divider>
        </div>
        <div class="tc-list">
          <div class="tc-item">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="icon" :style="{ 'background-color': '#ecf5ff' }">
                <svg-icon iconClass="shangshangqian"></svg-icon>
              </div>
              <div class="title">上上签</div>
              <div class="btns">
                <div class="btn" title="编辑" @click="handleOpenVisaSsq">
                  <svg-icon iconClass="edit"></svg-icon>
                </div>
                <div class="btn" title="删除"><svg-icon iconClass="delete"></svg-icon></div>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <div>
        <div class="tc-divider">
          <el-divider content-position="left">智能设备</el-divider>
        </div>
        <div class="tc-list">
          <div class="tc-item">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="icon" :style="{ 'background-color': '#ecf5ff' }">
                <svg-icon iconClass="yunding"></svg-icon>
              </div>
              <div class="title">云丁</div>
              <div class="btns">
                <div class="btn" title="编辑" @click="handleOpenZnsbYd">
                  <svg-icon iconClass="edit"></svg-icon>
                </div>
                <div class="btn" title="删除"><svg-icon iconClass="delete"></svg-icon></div>
              </div>
            </el-card>
          </div>

          <div class="tc-item">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="icon" :style="{ 'background-color': '#ecf5ff' }">
                <svg-icon iconClass="huize"></svg-icon>
              </div>
              <div class="title">慧泽</div>
              <div class="btns">
                <div class="btn" title="编辑" @click="handleOpenZnsbHz">
                  <svg-icon iconClass="edit"></svg-icon>
                </div>
                <div class="btn" title="删除"><svg-icon iconClass="delete"></svg-icon></div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </el-scrollbar>

    <tenantConfigWxMp ref="tenantConfigWxMpRef"></tenantConfigWxMp>
    <tenantConfigWxCp ref="tenantConfigWxCpRef"></tenantConfigWxCp>

    <tenantConfigPayWx ref="tenantConfigPayWxRef"></tenantConfigPayWx>
    <tenantConfigPayAli ref="tenantConfigPayAliRef"></tenantConfigPayAli>
    <tenantConfigPayLakalaOrg ref="tenantConfigPayLakalaOrgRef"></tenantConfigPayLakalaOrg>
    <tenantConfigPayLakala ref="tenantConfigPayLakalaRef"></tenantConfigPayLakala>

    <tenantConfigVisaSsq ref="tenantConfigVisaSsqRef"></tenantConfigVisaSsq>
    <tenantConfigZnsbYd ref="tenantConfigZnsbYdRef"></tenantConfigZnsbYd>
    <tenantConfigZnsbHz ref="tenantConfigZnsbHzRef"></tenantConfigZnsbHz>
  </div>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss">
  .tenant-config-wrapper {
    width: 100%;
    height: 100%;
    background-color: #ffffff;

    .tc-divider {
      padding: 1px 10px;
    }

    .tc-list {
      display: flex;
      align-items: center;

      .tc-item {
        margin: 10px;
        .icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 200px;
          height: 200px;

          .svg-icon {
            width: 7em;
            height: 7em;
          }
        }

        .title {
          padding: 10px;
          text-align: center;
          border-bottom: 1px solid #ebeef5;
          font-size: 16px;
          font-weight: 600;
        }

        .btns {
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          .btn {
            padding: 10px 30px;
          }
        }
      }
    }
  }
</style>
